<template>
  <view class="memberRules">
    <navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
    <view class="posis-fx">
      <view class="memberRules-tabs">
        <!-- tabs  -->
        <view v-for="(item,index) in tabsList" :key="index" class="tabs-item"
          :style="{color: currentTabIndex==index? '#000000':'#C6C6C6'}" @click="changeTabs(item.index)">
          {{item.tabsName}}
        </view>
      </view>
      <view class="aline">
        <view class="icon" :style="{transform: iconStyle}">
          <image class="location_iconimg" :src="tabsImg"></image>
        </view>
      </view>
    </view>
    <view class="Container" :style='{transform: translateX}'>
      <view class="element">
        <utools-parse v-show="currentTabIndex==0" id="utools-parse" page="category"
          :utools-data="rulesUtoolsData"></utools-parse>
      </view>
      <view class="element">
        <utools-parse v-show="currentTabIndex==1" id="utools-parse" page="category"
          :utools-data="equityUtoolsData"></utools-parse>
      </view>
      <view class="element">
        <levelDetailListCom v-show="currentTabIndex==2" @navigate="navigate" />
      </view>
    </view>
    <view class="ios_safe_zone" v-if="isIos">
      <view class="ios_safe_zone_line"></view>
    </view>
  </view>
</template>
<!-- 12 46 81 -->
<script>
  import api from '@/api/api';
  import NavBar from '@/components/common/navbar';
  import levelDetailListCom from './levelDetailList.vue'
  export default {
    components: {
      navBar: NavBar,
      levelDetailListCom
    },
    data() {
      return {
        isShowCustomNavBar: true,
        // 组件所需的参数
        navbarData: {
          showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
          title: '', //导航栏 中间的标题
          newLogo: uni.getStorageInfoSync('storeLogo'),
          isTopFixed: false,
          hideHome: true
        },
        iconStyle: `translateX(${-300}rpx)`,
        currentTabIndex: 0,
        translateX: 0,
        tabsImg: "",
        isIos: true,
        arrowRightImg: "",
        rulesUtoolsData: {},
        equityUtoolsData: {},
        tabsList: [{
          tabsName: '会员规则',
          index: 0
        }, {
          tabsName: '会员权益',
          index: 1
        }, {
          tabsName: '经验明细',
          index: 2
        }]
      }
    },
    async onLoad(option) {
      this.currentTabIndex = Number(option.tab) > 0 ? -1 : 0
      const {
        orderTabActiveSvgImg,
        arrowRightSvgImg
      } = require("../order/imgs.svg.js")
      this.tabsImg = orderTabActiveSvgImg();
      this.arrowRightImg = arrowRightSvgImg('#FFFFFF')
      this.rulesUtoolsData = await this.getUtoolsData('memberRules')
      this.equityUtoolsData = await this.getUtoolsData('memberEquity')
      const tabNum = option.tab === undefined ? 0 : Number(option.tab)
      this.changeTabs(tabNum)

      this.isIos = wx.getSystemInfoSync().system.includes('iOS') && wx.getSystemInfoSync()?.safeArea?.top > 20;
      //const _pageName = this.tabsList[this.currentTabIndex].tabsName || "";
      //this.$commonSensors.lithaTrack.crTrack('MemberEquityPageView',{page_name:_pageName})
    },
    methods: {
      changeTabs(val) {
        this.currentTabIndex = val;
        switch (val) {
          case 0:
            this.iconStyle = `translateX(${108}rpx)`
            this.translateX = `translateX(${0}vw)`
            break;
          case 1:
            this.iconStyle = `translateX(${363}rpx)`
            this.translateX = `translateX(${-100}vw)`
            break;
          case 2:
            this.iconStyle = `translateX(${614}rpx)`
            this.translateX = `translateX(${-100*2}vw)`
            break;
          default:
            break;
        }
      },
      async getUtoolsData(type) {
        let json = await api.getUtoolsJson({
          type: type
        });
        return json.success && json?.data ? JSON.parse(json.data) : null
      },
      async getLevelDetailList() {
        const json = await api.getLevelLists({
          header: {
            jwt: customerInfo.jwt
          },
          query: {
            page: that.pageNumber
          }
        });
        if (json.code == 1000) {
          that.listLength = json.data.length
          that.levelLists = [...that.levelLists, ...json.data];

        }
      },
      navigate(index) {
        this.changeTabs(index)
      }
    }
  }
</script>

<style lang="less">
  .memberRules {
    overflow: hidden;
    height: auto;
    box-sizing: border-box;

    .memberRules-tabs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 123rpx;
      margin: 0 72rpx 0 72rpx;
    }

    .Container {
      display: flex;
      width: 2230rpx;

      .element {
        width: 100vw;
        overflow: hidden;
        flex-shrink: 0;
      }

      .itemComm {
        width: 100vw;
        height: 138rpx;
        padding: 0 48rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .itemComm-top {
          height: 48rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 800;
        }

        .itemComm-btm {
          height: 48rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #757575;
        }

        .item-aline {
          bottom: 0;
          border-top: 0;
          border: 1rpx solid rgb(242, 242, 242);
        }
      }
    }

    .icon {
      position: absolute;
      top: -20rpx;
      left: 0;
      transform: translateX(90rpx);
      // transition: all 0.3s ease;
      /* 添加过渡效果，0.3秒完成，使用ease速度曲线 */

      // transition: ;
    }

    .aline {
      bottom: 0;
      border: 1rpx solid rgb(242, 242, 242);
      position: relative;
      z-index: 999;
    }

    .tabs-item {
      font-family: 'NotoSansSC-Medium';
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #C6C6C6;
      height: 70rpx;
      line-height: 70rpx;
    }

    .location_iconimg {
      width: 28rpx;
      height: 14rpx;
      flex-shrink: 0;
    }
  }

  .posis-fx {
    position: fixed;
    z-index: 1;
    background-color: #Fff;
    width: 100%;

  }
</style>
